<template>
	<view>
		<map style="width: 100%; height: 100vh;" :polyline='polyline' :latitude="latitude" :longitude="longitude"
			:markers="covers">
			<cover-view class="controls-list">
				<swiper class="swiper" circular indicator-dots :autoplay="false">
					<swiper-item>
						<view class="swiper-item uni-bg-red">路线1</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">路线B</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">路线C</view>
					</swiper-item>
				</swiper>
			</cover-view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectMarkerId: '',
				latitude: 39.909,
				longitude: 116.39742,
				polyline: [{
					points: [{
						latitude: 39.909,
						longitude: 116.39742
					}, {
						latitude: 39.908,
						longitude: 116.39741
					}, {
						latitude: 39.905,
						longitude: 116.39735
					}, {
						latitude: 39.908,
						longitude: 116.39720
					}],
					width: 4,
					color: '#f00',
				}],
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					width: 20,
					height: 20,
					iconPath: '../../static/logo.png',
					callout: {
						content: "1", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#fff", //文本颜色
						fontSize: "12px",
						bgColor: "rgba(114,96,72)", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
				}, {
					id: 2,
					latitude: 39.909,
					longitude: 116.38742,
					width: 20,
					height: 20,
					iconPath: '../../static/logo.png',
					callout: {
						content: "2", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#fff", //文本颜色
						fontSize: "12px",
						bgColor: "rgba(114,96,72)", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
				}],
			};
		},
		methods: {

		}
	}
</script>

<style lang="scss">
.controls-list{
	position: absolute;
	bottom: 60upx;
	left: 30upx;
	width: calc(100% - 60upx);
	.swiper-item{
		background-color: #fff;
		height: 100%;
		border-radius: 12upx;
		padding: 22upx 30upx;
		box-sizing: border-box;
	}
}
</style>
